<template>
  <n-layout-sider class="menu-sider" :native-scrollbar="false" :width="260">
    <div class="sider-logo h-[54px] bg-primary dark:bg-transparent">
      <div class="logo-content flex items-center justify-center">
        <n-text class="text-lg cursor-pointer" @click="$router.push('/')">ChatGPT</n-text>
      </div>
    </div>
    <n-menu :value="$route.name" :watch-props="['defaultExpandedKeys']" :options="menuState.options"
      @update:value="$emit('switchMenu', $event)" />
  </n-layout-sider>
</template>

<script setup>
import { h, reactive } from 'vue'
import { menuRoutes } from '@/router/modules'
import { NIcon } from 'naive-ui'
import { HomeOutline, KeyOutline, PersonCircleOutline, PeopleOutline } from '@vicons/ionicons5'

const emit = defineEmits(['switchMenu'])

const menuState = reactive({
  options: []
})

const iconArr = [
  { name: 'dashboard', icon: HomeOutline },
  { name: 'manage', icon: PeopleOutline },
  { name: 'token', icon: KeyOutline },
  { name: 'user', icon: PersonCircleOutline },
]

const renderMenu = list => {
  const renderIcon = name => {
    const { icon } = iconArr.filter(item => item.name === name)[0] || { icon: null }
    return () => h(NIcon, { component: icon }, {})
  }
  const handleField = item => {
    return {
      label: item.meta.title,
      key: item.name,
      icon: item.meta.icon && renderIcon(item.name),
      children: item.children && renderMenu(item.children),
    }
  }
  return list.map(item => handleField(item))
}
// 侧边菜单栏
menuState.options = renderMenu(menuRoutes)
</script>

<style lang="less" scoped>
.menu-sider {
  .sider-logo {
    .logo-content {
      width: 100%;
      height: 100%;
      background-color: hsla(0, 0%, 100%, .1) !important;

      .n-text {
        color: hsla(0, 0%, 100%, .75) !important;
      }
    }
  }

  &:deep(.n-menu) {
    min-height: calc(100vh - 54px);
    padding: 14px;

    .n-menu-item,
    .n-submenu {
      .n-menu-item-content {
        user-select: none;

        &:before,
        &:after {
          right: 0;
        }

        &:before {
          left: 0;
        }
      }

      .n-menu-item-content:not(.n-menu-item-content--disabled).n-menu-item-content--hover::before,
      .n-menu-item-content:not(.n-menu-item-content--disabled):hover::before {
        background: var(--n-item-color-active);
      }

      .n-menu-item-content.n-menu-item-content--selected {
        &:before {
          border-radius: 6px;
        }

        &:after {
          background-color: var(--n-item-text-color-active);
        }

        .n-menu-item-content__icon,
        .n-menu-item-content-header {
          color: var(--n-item-text-color-active);
        }
      }
    }
  }
}
</style>